<template>
  <div id="body">
    <!-- 标签栏 -->
    <div id="bar">
      <van-tabs v-model:active="active">
        <van-tab title="全部订单"></van-tab>
        <van-tab title="待支付"></van-tab>
        <van-tab title="已支付"></van-tab>
        <van-tab title="已完成"></van-tab>
      </van-tabs>
    </div>
    <!-- 内容 -->
    <div id="content">
      <div id="onepart" v-for="(item, index) in filteredData" :key="index">
        <div class="oneRow">
          <span>{{ item.date }}</span>
          <span :class="getStatusClass(item.status)">{{
            item.status == 0
              ? '待支付'
              : item.status == 1
              ? '已支付'
              : item.status == 3
              ? `已完成`
              : '待支付'
          }}</span>
        </div>
        <div class="twoRow">
          <div>
            <img :src="item.image" alt="" />
          </div>
          <div style="display: flex; flex-direction: column; justify-content: space-around">
            <div
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                -webkit-box-orient: vertical;
              "
            >
              {{ item.title }}
            </div>
            <span>×1</span>
            <div>{{ item.ord }}</div>
            <div>{{ item.color }}</div>
          </div>
        </div>
        <div class="threeRow" v-if="item.status != 3">
          应付总额: <span>￥{{ item.money }}</span>
        </div>
        <div class="fourRow" v-if="item.status == 2 ">
          <div @click="cancelOrder(item.id)">取消订单</div>
          <div @click="payment(item,item.id)">立即支付</div>
        </div>
        <div class="fiveRow" v-if="item.status == 1">
          <div @click="handleClick(item.id)">确认收货</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useIntegrallist } from '@/stores/integralList.js' // 导入名为useIntegrallist的自定义钩子函数
import { showToast } from 'vant' // 导入showToast函数用于显示提示框
import { computed, ref } from 'vue' // 导入computed和ref函数用于创建计算属性和响应式数据
import { baseURL, giftBoxLists, giftBoxSucce, quxiaoorderdel } from '../api' // 导入api中的接口函数和常量
import router from '../router' // 导入router对象
const integrallist = useIntegrallist() // 调用useIntegrallist钩子函数创建名为integrallist的积分列表Store对象

function payment(item, id) { // 定义名为payment的函数，接收两个参数item和id
  integrallist.getCurGift(item) // 调用integrallist的getCurGift方法，将item传递给该方法
  router.push({ // 通过router进行页面跳转，跳转至'/confirmationOfPayment'路径，并传递query参数orderId
    path: '/confirmationOfPayment',
    query: {
      orderId: id
    }
  })
}

function handleClick(id) { // 定义名为handleClick的函数，接收一个参数id
  giftBoxSucce({ id }).then(() => { // 调用giftBoxSucce接口函数，传递id参数，并在成功返回结果后执行回调函数
    showToast(`收货成功`) // 显示提示框，内容为'收货成功'
    giftBoxLists().then((res) => { // 调用giftBoxLists接口函数，获取礼品盒列表数据
      data.value = res.map((item) => { // 使用map方法遍历res数组的每个元素，并为每个元素设置image属性为baseURL + item.image，同时处理item.date格式为年月日
        item.image = baseURL + item.image
        let date = new Date(item.date)
        item.date = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
        return item
      })
    })
  })
  history.go(0) // 刷新页面
}

giftBoxLists().then((res) => { // 调用giftBoxLists接口函数，获取礼品盒列表数据
  data.value = res.map((item) => { // 使用map方法遍历res数组的每个元素，并为每个元素设置image属性为baseURL + item.image，同时处理item.date格式为年月日
    item.image = baseURL + item.image
    let date = new Date(item.date)
    item.date = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
    return item
  })
})

const active = ref(0) // 创建名为active的响应式变量，默认值为0

function cancelOrder(id) { // 定义名为cancelOrder的函数，接收一个参数id
  quxiaoorderdel({ id }).then(() => { // 调用quxiaoorderdel接口函数，传递id参数，并在成功返回结果后执行回调函数
    showToast(`取消成功`) // 显示提示框，内容为'取消成功'
    giftBoxLists().then((res) => { // 调用giftBoxLists接口函数，获取礼品盒列表数据
      data.value = res.map((item) => { // 使用map方法遍历res数组的每个元素，并为每个元素设置image属性为baseURL + item.image，同时处理item.date格式为年月日
        item.image = baseURL + item.image
        let date = new Date(item.date)
        item.date = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
        return item
      })
    })
  })
  history.go(0) // 刷新页面
}

const data = ref([]) // 创建名为data的响应式变量，默认值为空数组

const filteredData = computed(() => { // 创建计算属性filteredData
  if (active.value == 0) { // 如果active的值为0，则返回完整的data列表
    return data.value
  } else if (active.value == 1) { // 如果active的值为1，则返回status为2（待支付）的data列表
    return data.value.filter((item) => item.status == '2')
  } else if (active.value == 2) { // 如果active的值为2，则返回status为1（已支付）的data列表
    return data.value.filter((item) => item.status == '1')
  } else if (active.value == 3) { // 如果active的值为3，则返回status为3（已完成）的data列表
    return data.value.filter((item) => item.status == '3')
  } else {
    return 1 // 否则返回1
  }
})

function getStatusClass(status) { // 定义名为getStatusClass的函数，接收一个参数status
  if (status == 1) { // 如果status的值为1，则返回'red'
    return 'red'
  } else if (status == 0) { // 如果status的值为0，则返回'yellow'
    return 'yellow'
  } else if (status == 2) { // 如果status的值为2，则返回'blue'
    return 'blue'
  } else if (status == 3) { // 如果status的值为3，则返回'black'
    return 'black'
  }
}

</script>

<style lang="less" scoped>
@var1: #f5f6f8;
@var2: #999999;
@var3: #ffc456;

#body {
  height: 100%;
  background-color: @var1;
}
#bar {
  background-color: white;
}
#content > div {
  background-color: white;
  margin-bottom: 1.5vh;
  border-radius: 10px;
}
#content {
  padding-top: 1.5vh;
  width: 94%;
  margin-left: 3%;
}
#onepart {
  padding: 1vh 2vw;
}
.oneRow {
  display: flex;
  justify-content: space-between;
  padding: 1vh 2vw;
  & > span:first-child {
    font-size: 14px;
  }
  & > span:last-child {
    font-size: 14px;
    color: red;
    font-weight: 900;
  }
}
img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin: 0 2vw;
  margin-right: 3vw;
}
.twoRow {
  display: flex;
  margin-top: 1vh;
  & > div:last-child > div:first-child {
    display: flex;
    justify-content: space-between;
    width: 60vw;
    font-size: 14px;
    font-weight: 900;
    span {
      color: @var2;
      font-size: 15px;
    }
  }
  & > div:last-child > div:nth-child(2),
  & > div:last-child > div:nth-child(3) {
    font-size: 14px;
    color: @var2;
  }
  & > div:last-child > div:nth-child(2) {
    margin-top: 1.5vh;
  }
}
.threeRow {
  display: flex;
  justify-content: end;
  font-size: 14px;
  padding-top: 2vh;
  margin-right: 2vw;
  span {
    font-weight: 900;
    font-size: 13px;
  }
}
.fourRow {
  display: flex;
  justify-content: end;
  margin: 1vh 2vw;
  & > div:first-child {
    padding: 0.5vh 2vw;
    border: #f0f0f0 1px solid;
    border-radius: 15px;
    font-size: 14px;
  }
  & > div:last-child {
    padding: 0.5vh 2vw;
    border: #f0f0f0 1px solid;
    border-radius: 15px;
    font-size: 14px;
    background-color: @var3;
    color: white;
    margin-left: 5vw;
  }
}
.fiveRow {
  display: flex;
  justify-content: end;
  margin: 1vh 2vw;
  & > div {
    padding: 0.5vh 2vw;
    border: #f0f0f0 1px solid;
    border-radius: 15px;
    font-size: 14px;
  }
}

.blue {
  color: blue !important ;
}
.red {
  color: red !important ;
}
.yellow {
  color: #ffc760 !important ;
}
.black {
  color: #504f4f !important ;
}
</style>
